<template>
  <Table ref="table" :columns="columns" :data="curProperty[category]">
    <template slot-scope="{ row, index }" slot="defaultValue">
      <fieldCell
        v-if="curProperty[category][index].valueType !== 'group'"
        v-model="curProperty[category][index].defaultValue"
        :compGroup="compGroup"
        :config="{ 
          key: curProperty[category][index].name,
          multiple: curProperty[category][index].multiple,
          placeholder: curProperty[category][index].placeholder,
          editor: curProperty[category][index].valueType, 
          options: curProperty[category][index].sourceKey !== 'fields' || !curProperty.fields
             ? curProperty[category][index].options :
            curProperty.fields.map(item => {
              return item.length > 0 ? {label: item[1].defaultValue, value: item[1].defaultValue} : false
            })
        }"
        @change="change"
      ></fieldCell>
    </template>
    <template slot-scope="{ row, index }" slot="showField">
      <Checkbox v-if="curProperty[category][index].valueType !== 'group'"
        v-model="curProperty[category][index].showField" @on-change="change"></Checkbox>
    </template>
  </Table>
</template>

<script>
    import fieldCell from './fieldCell'
    import storeVar from '../../mixins/storeVar';
    export default {
      components: { fieldCell },
      mixins:[storeVar],
      props: {
          tableData: {
              default: () => {
                  return [];
              }
          },
          category:{
            default: () => {
              return 'attrs';
            }
          }
      },
      data () {
          return {
              columns: [
                  {
                      key: 'name',
                      title: this.$t(`compDesign.jProperty.attrName`),
                      minWidth: 110,
                      maxWidth: 210,
                      align: 'left',
                        // render: (h, params) => {
                        //     return h('div', {}, `${this.getUseStateCode(params.row.useStateCode)}`)
                        // }
                      render: (h, params) => {
                        if (params.row.valueType === 'group') {
                          return h('div', {
                            class: 'group',
                            style: {
                              fontSize: '14px',
                              fontWeight: 800
                            }
                          }, [
                            // h('Poptip', {
                            //   props: {
                            //     trigger: 'hover',
                            //     placement: 'right',
                            //     transfer: true,
                            //     title: '提示',
                            //     content: 'xxx'
                            //   }
                            // },[
                              h('span', params.row.name),
                            //   h('Icon', {props: {type: 'ios-help-circle-outline'}, style: {color: '#000',fontSize: '16px', paddingLeft: '4px'} })
                            // ]), 
                          ])
                        } else {
                          return h('div', params.row.name)
                        }
                      }
                  },
                  {
                      key: 'defaultValue',
                      title: this.$t(`compDesign.jProperty.defaultValue`),
                      minWidth: 100,
                      align: 'left',
                      slot: 'defaultValue'
                  },
                  {
                      key: 'showField',
                      title: this.$t(`compDesign.jProperty.isUse`),
                      width: 70,
                      align: 'center',
                      slot: 'showField'
                  }
              ]
          };
      },
      mounted () {},
      methods:{
        change() {
          if (this.category === 'attrs') {
            this.compGroup.setClassProperty()
          }
        }
      }

    };
</script>
<style lang="less">
.property-editor {
  .ivu-table-cell {
    overflow: visible;
    .group {
      position: relative;
      display: inline-block;
      color: #333;
      &:before {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        // margin-right: 6px;
        background-color: var(--primary-color);
      }
    }
  }
}
</style>
